import React, { useEffect, useState } from "react";
import { Button, Descriptions, PageHeader } from "antd";

import { useLocation, useParams } from "react-router";
import moment from "moment";
import axios from "axios";
export default function NewsPreview() {
  const [newsInfo, setNewsInfo] = useState(null); //初始值为null
  console.log(newsInfo);
  const location = useLocation();
  const params = useParams();
  useEffect(() => {
    axios
      .get(`/news/${params.id}?_expand=category&_expand=role`)
      .then((res) => {
        console.log(res.data);
        // if (res.data.label) {
        //   res.data.title = res.data.label;
        // }
        console.log(res.data);
        setNewsInfo(res.data);
      });
  }, [params.id]);
  const auditList = ["未审核", "审核中", "已通过", "未通过"];
  const publishList = ["未发布", "待发布", "已上线", "已下线"];
  const colorList = ["black", "orange", "green", "red"];
  return (
    <div>
      {newsInfo && (
        <PageHeader
          onBack={() => window.history.back()}
          title={newsInfo.label}
          subTitle={newsInfo.categoryId}
        >
          <Descriptions size="small" column={3}>
            <Descriptions.Item label="创建者">
              {newsInfo.author}
            </Descriptions.Item>
            <Descriptions.Item label="创建时间">
              {moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:ss")}
            </Descriptions.Item>
            {/* 如果没发布设置一个- */}
            <Descriptions.Item label="发布状态">
              {newsInfo.publishTime
                ? moment(newsInfo.createTime).format("YYYY/MM/DD HH:mm:ss")
                : "-"}
            </Descriptions.Item>
            <Descriptions.Item label="区域">
              {newsInfo.region}
            </Descriptions.Item>
            <Descriptions.Item label="审核状态">
              {/* 封装一个颜色的数组 */}
              <span style={{ color: colorList[newsInfo.auditState] }}>
                {auditList[newsInfo.auditState]}
              </span>
            </Descriptions.Item>
            <Descriptions.Item label="发布状态">
              <span style={{ color: colorList[newsInfo.publishState] }}>
                {publishList[newsInfo.publishState]}
              </span>
            </Descriptions.Item>
            <Descriptions.Item label="访问数量">
              {newsInfo.view}
            </Descriptions.Item>
            <Descriptions.Item label="点赞数量">
              {newsInfo.star}
            </Descriptions.Item>
            <Descriptions.Item label="评论数量">0</Descriptions.Item>
          </Descriptions>
        </PageHeader>
      )}
      {/* 富文本标记器的内容 把html标记转为文本 */}
      <div
        dangerouslySetInnerHTML={{ __html: newsInfo?.content }}
        style={{ border: "1px solid #ccc", padding: "24px", margin: "20px" }}
      ></div>
    </div>
  );
}
